<template>
  <ui-dialog
    custom-class="vx-dialog"
    top="0"
    :visible.sync="show"
    :title="title"
    :close-on-click-modal="closeOnClickModal"
    :show-close="showClose"
    :close-on-press-escape="closeOnPressEscape"
  >
    <slot>
      <div class="vx-dialog-content">
        <img :src="iconSrc" width="60px" height="60px" />
        <p>{{ message }}</p>
      </div>
    </slot>
    <slot name="footer" slot="footer">
      <div class="vx-dialog-footer" v-if="!autoHide">
        <ui-button class="default-btn" @click="onCancel">{{ cancelText }}</ui-button>
        <ui-button :loading="loading" class="primary-btn" @click="onConfirm">{{ confirmText }}</ui-button>
      </div>
    </slot>
  </ui-dialog>
</template>
<script>
export default {
  name: 'vx-dialog',
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    message: {
      type: String,
      default: '',
    },
    confirmText: {
      type: String,
      default: '确定',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    icon: {
      type: String,
      default: 'warning',
      validator(icon) {
        return ['warning', 'success'].includes(icon);
      },
    },
    closeOnClickModal: {
      type: Boolean,
      default: false,
    },
    autoHide: {
      type: Boolean,
      default: false,
    },
    time: {
      type: Number,
      default: 3,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: this.value,
      t: this.time,
      timer: null,
    };
  },
  computed: {
    iconSrc() {
      let icon = this.icon;
      if (icon === 'success') icon = 'successGreen';
      return require(`@/assets/image/common/${icon}.png`);
    },
  },
  methods: {
    // 组件内部使用的方法
    onConfirm() {
      this.show = false;
      this.$emit('confirm');
    },
    onCancel() {
      this.show = false;
      this.$emit('cancel');
    },
    hideDialog() {
      this.show = false;
    },
    // 计时器处理
    startCountDown() {
      const self = this;
      if (!self.time) {
        return;
      }
      function countdown() {
        if (!self.t) {
          self.timer && clearTimeout(self.timer);
          self.timer = null;
          self.hideDialog();
          return;
        }
        self.timer = setTimeout(() => {
          clearTimeout(self.timer);
          self.timer = null;
          self.t--;
          countdown();
        }, 1000);
      }
      countdown();
    },
    stopCountDown() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      setTimeout(() => {
        this.t = this.time;
      }, 200);
    },
  },
  watch: {
    value(val) {
      this.show = val;
      if (this.autoHide) {
        if (val) {
          this.startCountDown();
        } else {
          this.stopCountDown();
        }
      }
    },
    show(val) {
      this.$emit('input', val);
    },
  },
};
</script>
<style lang="scss">
.vx-dialog.ui-dialog {
  width: 500px;
  top: 50%;
  transform: translateY(-50%);
  .ui-dialog__body {
    padding: 0 30px 30px;
  }
  .vx-dialog-content {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    line-height: 25px;
    img {
      margin-bottom: 16px;
    }
  }
  .vx-dialog-footer {
    .ui-button {
      width: 150px;
      &:not(:first-child) {
        margin-left: 20px;
      }
    }
  }
}
</style>
